<template>
  <header class="bg-white/80 shadow-md fixed z-50 top-0 inset-x-0">
    <div class="container flex justify-between items-center py-2">
      <nuxt-link to="/">
        <img src="@/assets/images/logo.png" alt="" />
      </nuxt-link>
      <div class="flex items-center space-x-8">
        <nuxt-link
          v-for="(item, index) in links"
          :key="index"
          class="hover:text-blue"
          :to="item.to"
          >{{ item.label }}</nuxt-link
        >

        <el-popover
          v-if="avatar"
          placement="top-start"
          width="120"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        >
          <ul>
            <li class="hover:bg-gray-100 p-2 pointer" @click="logout">退出</li>
          </ul>
          <span slot="reference" class="flex pointer items-center">
            <img :src="avatar" class="mr-2 rounded-full w-8 h-8" />
            <span>{{ username }}</span>
          </span>
        </el-popover>
        <span v-else class="pointer" @click="onLogin">登录</span>
      </div>
    </div>
    <this-login ref="login" />
  </header>
</template>

<script>
import thisLogin from "./login.vue";

export default {
  components: { thisLogin },
  data() {
    return {
      links: [
        { to: "/", label: "主站" },
        { to: "/recommend", label: "推荐" },
        { to: "/sites/123", label: "分站点" },
        { to: "/categories/123", label: "分类页" },
        { to: "/lm1", label: "栏目2" },
        { to: "/lm2", label: "栏目3" },
        { to: "/lm3", label: "栏目4" },
      ],
    };
  },
  computed: {
    username() {
      return this.$store.state.user.username;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    onLogin() {
      this.$refs.login.open();
    },
    logout() {
      this.$axios.post("logout").then((res) => {
        this.$store.commit("logout");
      });
    },
  },
};
</script>

<style>
</style>